<template>
  <view class="order-list">
    <view class="order-item" v-for="(item, index) in orderList" :key="index" @tap="goToDetail(item)">
      <!-- 订单头部 -->
      <view class="order-header">
        <view class="left">
          <text class="order-no">订单号：{{item.orderNo}}</text>
          <text class="order-time">{{item.createTime}}</text>
        </view>
        <text class="order-status" :class="item.status">
          {{item.status === 'completed' ? '已完成' : '进行中'}}
        </text>
      </view>

      <!-- 商品列表 -->
      <view class="product-list">
        <view class="product-item" v-for="(product, pIndex) in item.products" :key="pIndex">
          <text class="product-name">{{product.name}}</text>
          <text class="product-specs">{{product.specs}}</text>
          <view class="product-price">
            <text>¥{{product.price}}</text>
            <text class="count">x{{product.count}}</text>
          </view>
        </view>
      </view>

      <!-- 订单底部 -->
      <view class="order-footer">
        <view class="total">
          <text>共{{getTotalCount(item.products)}}件商品</text>
          <text class="price">实付 ¥{{item.totalPrice}}</text>
        </view>
        <view class="actions">
          <view class="btn outline" @tap.stop="reorder(item)">再来一单</view>
          <view class="btn primary" v-if="item.status === 'processing'" @tap.stop="checkOrder(item)">
            查看进度
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    orderList: {
      type: Array,
      default: () => []
    },
    currentTab: {
      type: Number,
      default: 0
    }
  },
  
  methods: {
    getTotalCount(products) {
      return products.reduce((sum, item) => sum + item.count, 0)
    },
    
    reorder(order) {
      // 构建购物车数据
      const cartData = {
        list: order.products.map(item => ({
          ...item,
          totalPrice: item.price * item.count,
          specSelected: true
        })),
        total: order.products.reduce((sum, item) => sum + item.count, 0),
        price: order.totalPrice
      }
      
      // 保存到本地存储
      uni.setStorageSync('cartData', cartData)
      
      // 保存用餐方式
      uni.setStorageSync('diningType', order.type)
      
      // 显示提示
      uni.showToast({
        title: '已添加到购物车',
        icon: 'success',
        duration: 1500,
        success: () => {
          // 延迟跳转到确认订单页面
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/order/orderSubmit',
              animationType: 'slide-in-right',
              animationDuration: 300
            })
          }, 1500)
        }
      })
    },
    
    checkOrder(order) {
      uni.showModal({
        title: '订单进度',
        content: this.getOrderProgress(order),
        showCancel: false,
        confirmText: '我知道了',
        success: (res) => {
          if(res.confirm) {
            // 如果需要刷新订单状态
            this.$emit('refresh')
          }
        }
      })
    },
    
    getOrderProgress(order) {
      if(order.type === 'dine-in') {
        return `您的堂食订单正在制作中
制作进度：80%
预计3分钟后可以取餐
取餐号：A12
请前往取餐区等候`
      } else {
        return `您的外卖订单正在配送中
配送员：张师傅
联系电话：138****8888
预计15分钟送达
配送地址：${order.address || '未设置地址'}`
      }
    },
    
    goToDetail(order) {
      console.log('跳转订单详情，订单数据:', order)
      uni.navigateTo({
        url: `/pages/order/detail?orderNo=${order.orderNo}`,
        animationType: 'slide-in-right',
        animationDuration: 300
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order-list {
  padding: 20rpx;
  
  .order-item {
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    
    .order-header {
      padding: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      
      .left {
        .order-no {
          font-size: 28rpx;
          color: #333;
          margin-right: 20rpx;
        }
        
        .order-time {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .order-status {
        font-size: 26rpx;
        
        &.completed {
          color: #999;
        }
        
        &.processing {
          color: #8cd548;
        }
      }
    }
    
    .product-list {
      padding: 20rpx 30rpx;
      
      .product-item {
        display: flex;
        align-items: center;
        padding: 16rpx 0;
        
        .product-name {
          flex: 1;
          font-size: 28rpx;
          color: #333;
        }
        
        .product-specs {
          font-size: 24rpx;
          color: #999;
          margin: 0 20rpx;
        }
        
        .product-price {
          font-size: 28rpx;
          color: #333;
          
          .count {
            margin-left: 10rpx;
            color: #999;
          }
        }
      }
    }
    
    .order-footer {
      padding: 30rpx;
      border-top: 1px solid #f5f5f5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .total {
        font-size: 26rpx;
        color: #999;
        
        .price {
          margin-left: 20rpx;
          color: #333;
          font-weight: 500;
        }
      }
      
      .actions {
        display: flex;
        gap: 20rpx;
        
        .btn {
          padding: 12rpx 32rpx;
          border-radius: 100rpx;
          font-size: 26rpx;
          
          &.outline {
            border: 1px solid #ddd;
            color: #666;
          }
          
          &.primary {
            background: #8cd548;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>